/* 我的聚美下拉菜单 */
//获取元素
let topright = document.getElementsByClassName("top-right")[0];
let mylist = document.getElementsByClassName("my-list")[0];
let mydiv1 = topright.getElementsByClassName("my")[0];
//绑定事件
mydiv1.addEventListener("onmouseout", function () {
    mylist.style.display = "none";
})

/* 更多下拉菜单 */
//获取元素
let morelist = document.getElementsByClassName("more-list")[0];
let mydiv2 = topright.getElementsByClassName("more")[0];
//绑定事件
mydiv2.addEventListener("onmouseout", function () {
    morelist.style.display = "none";
})

/* 选项卡切换 */
//获取元素
let picturelist = document.getElementsByClassName("picture-list")[0];
let picturelistlis = picturelist.children;
for (var i = 0; i < picturelistlis.length; i++) {
    picturelistlis[i].onclick = function () {
        for (var i = 0; i < picturelistlis.length; i++) {
            picturelistlis[i].style.backgroundColor = "";
            picturelistlis[i].style.border = "1px solid #999999";
        }
        this.style.backgroundColor = "white";
        this.style.borderBottom = "none";
    }
}

/* 登录守卫 */
var goCart = document.getElementById("goCart");
console.log(goCart);
// 去购物车的登录守卫
goCart.onclick = function(){
    if(localStorage.getItem("token") !== "ok"){
        if(confirm("您好，请您先登录")){
            location.href = "./login.html"
        }
        return false;
    }
}


class List {
    constructor() {
        this.cont = document.getElementById("cont");
        this.url = "http://localhost:3000/data/goodslist.json";
        this.load();

        // 1. 绑定按钮的点击事件
        this.addEvent()
    }
    load() {
        ajax({
            url: this.url,
            success: (res) => {
                this.res = JSON.parse(res).msg;
                // console.log(this.res);
                this.render();
            }
        })
    }
    render() {
        // console.log(this.res)
        let str = "";
        for (let i = 0; i < this.res.length; i++) {
            str += `<div class="picture" index="${this.res[i].proId}">
            <div class="picture-word">
            <p>${this.res[i].shop}</p>
            </div>
            <img src="${this.res[i].imgSrc}" alt="">
            <p>${this.res[i].proName}</p>
            <span>${this.res[i].price}</span>
            <a href="Productdetailspage.html?${this.res[i].id}"><i>去看看</i></a>
            <s class = "addCart">加入购物车</s>
        </div>`
        }
        this.cont.innerHTML = str;
    }
    addEvent() {
        const that = this;
        this.cont.addEventListener("click", function (eve) {
            const e = eve || window.event;
            const tar = e.target || e.srcElement;

            if (tar.className === "addCart") {
                that.id = tar.parentNode.getAttribute("index")
                that.setCookie();
            }
        })
    }
    setCookie() {
        // 0. 假设数据的存储格式
        // [{id:"u143rufg",num:1},{},{},...]

        // 1. 先读数据
        this.goodsMsg = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : [];
        // console.log(this.goodsMsg)
        if (this.goodsMsg.length < 1) {
            // 2. 第一次存，直接存
            this.goodsMsg.push({
                id: this.id,
                num: 1
            })
        } else {
            // 3. 不是第一次存，需要先读，读到数据之后
            // 4. 判断是否有重复数据
            let i = 0;
            const flag = this.goodsMsg.some((val, idx) => {
                i = idx;
                return val.id === this.id
            })
            if (flag) {
                // 5. 有，数量+1
                this.goodsMsg[i].num++
            } else {
                // 6. 没有，新增
                this.goodsMsg.push({
                    id: this.id,
                    num: 1
                })
            }
        }
        // 7. 存回本地存储
        setCookie("goodsMsg", JSON.stringify(this.goodsMsg));
    }
}


new List;